<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <title>装备详情</title>
    <style>
        body {
            background-color: #121212;
            color: #e0e0e0;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0 15px 40px 15px;
            position: relative;
            min-height: 100vh;
        }
        .container {
            max-width: 800px;
            margin: 50px auto 0;
            background-color: #222;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 0 12px rgba(170, 155, 249, 0.5);
        }
        h1 {
            color: #aa9bf9;
            margin-bottom: 20px;
            font-size: 2rem;
            text-align: center;
        }
        .image-container {
            text-align: center;
            margin-bottom: 20px;
        }
        .image-container img {
            max-width: 100%;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(170, 155, 249, 0.7);
        }
        .details {
            color: #ccc;
            font-size: 1.1rem;
            line-height: 1.5;
        }
        .details p {
            margin: 10px 0;
        }
        .btn-order {
            display: block;
            width: 100%;
            margin: 30px auto 0;
            padding: 14px 0;
            background-color: #aa9bf9;
            color: #121212;
            border: none;
            border-radius: 6px;
            font-weight: 700;
            font-size: 18px;
            cursor: pointer;
            text-align: center;
            transition: background-color 0.3s ease;
        }
        .btn-order:hover {
            background-color: #8c7ee6;
        }
        .back-home-btn {
            position: fixed;
            top: 20px;
            left: 20px;
            background-color: #aa9bf9;
            color: #121212;
            padding: 10px 18px;
            border-radius: 6px;
            font-weight: 700;
            text-decoration: none;
            font-size: 16px;
            z-index: 1000;
            transition: background-color 0.3s ease;
        }
        .back-home-btn:hover {
            background-color: #8c7ee6;
        }
        /* 右上角用户模块 */
        .login-link, .register-link, .user-link {
            position: fixed;
            top: 20px;
            background-color: #aa9bf9;
            color: #121212;
            padding: 10px 20px;
            font-weight: 700;
            font-size: 16px;
            border-radius: 6px;
            text-decoration: none;
            transition: background-color 0.3s ease;
            z-index: 1000;
            display: inline-block;
        }
        .login-link:hover, .register-link:hover, .user-link:hover {
            background-color: #8c7ee6;
        }
        .login-link { right: 100px; }
        .register-link { right: 20px; }
        .user-link { right: 20px; cursor: pointer; }
    </style>
</head>
<body>
<a href="/ffub/main.html" class="back-home-btn">返回主页</a>

<div id="topLinks"></div>

<div class="container" id="app">
    <h1>{{ equipment.equipmentName }}</h1>
    <div class="image-container">
        <img :src="equipment.equipmentImage" alt="装备图片" />
    </div>
    <div class="details">
        <p><strong>价格:</strong> ¥{{ equipment.equipmentPrice }}</p>
        <p><strong>类型:</strong> {{ equipment.equipmentType }}</p>
        <p><strong>稀有度:</strong> {{ equipment.rarity }}</p>
        <p><strong>磨损度:</strong> {{ equipment.exterior }}</p>
    </div>

    <button class="btn-order" @click="orderNow">立即下单</button>
</div>

<script>
    // 顶部登录/用户信息栏
    new Vue({
        el: '#topLinks',
        data() {
            return {
                userName: localStorage.getItem('userName') || ''
            }
        },
        template: `
          <div>
          <a v-if="!userName" href="login.html" class="login-link">登录</a>
          <a v-if="!userName" href="register.html" class="register-link">注册</a>
          <a v-if="userName" href="user.html" class="user-link">{{ userName }}</a>
          </div>
        `
    });

    // 装备详情及下单逻辑
    new Vue({
        el: '#app',
        data: {
            equipment: {}
        },
        mounted() {
            const urlParams = new URLSearchParams(window.location.search);
            const id = urlParams.get('id');
            if (!id) {
                alert('未指定装备ID');
                return;
            }
            axios.get('/ffub/equipment/' + id)
                .then(res => {
                    if (res.data && res.data.code === 200) {
                        this.equipment = res.data.data;
                    } else {
                        alert('获取装备信息失败: ' + (res.data.msg || '未知错误'));
                    }
                })
                .catch(() => {
                    alert('获取装备信息失败，请稍后重试');
                });
        },
        methods: {
            orderNow() {
                const userId = localStorage.getItem('userId');
                if (!userId) {
                    alert('请先登录后再下单');
                    window.location.href = 'login.html';
                    return;
                }

                const orderData = {
                    equipmentId: this.equipment.equipmentId,
                    sellerId: this.equipment.userId,
                    buyerId: parseInt(userId),
                    equipmentName: this.equipment.equipmentName,
                    orderPrice: this.equipment.equipmentPrice,
                    status: 1
                };

                // 先下单
                axios.post('/ffub/orders', orderData)
                    .then(res => {
                        if (res.data && res.data.code === 200) {
                            // 下单成功后，修改装备拥有者
                            return axios.put('/ffub/equipment/update', {
                                equipmentId: this.equipment.equipmentId,
                                userId: parseInt(userId),
                                status: 0
                            });
                        } else {
                            alert('下单失败: ' + (res.data.msg || '未知错误'));
                            throw new Error('下单失败');
                        }
                    })
                    .then(res => {
                        if (res.data && res.data.code === 200) {
                            alert('下单成功！');
                            window.location.href = 'equipment_list.html';
                        } else {
                            alert('更新装备拥有者失败: ' + (res.data.msg || '未知错误'));
                        }
                    })
                    .catch(() => {
                        alert('请求失败，请稍后重试');
                    });
            }
        }
    });
</script>
</body>
</html>
